<template>
  <div class="sidebarCheck" style="height:100%;overflow:hidden;">
    <div :style="{height: setHeight}"></div>
    <a-tabs type="card" size="small">
      <a-tab-pane tab=权限组列表 key="1">

        <div :style="heightTree" style="overflow:auto">
          <div style="padding: 0 10px;">
            <a-tree
              :size="'small'"
              :treeData="roleTree"
              :checkable="checkable"
              @check="onCheck"
              @select="onSelect"
              :checkStrictly="false"
              :checkedKeys="checked"
              :selectedKeys="selected"
              :expandedKeys="iExpandedKeys"
              :autoExpandParent="autoExpandParent"
              @expand="onExpand"
            >
              <template slot="title" slot-scope="{title}">
                  <span v-if="title.indexOf(searchValue) > -1">
                    {{ title.substr(0, title.indexOf(searchValue)) }}
                    <span style="color: #f50">{{ searchValue }}</span>
                    {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
                  </span>
                <span v-else>{{ title }}</span>
              </template>

            </a-tree>
          </div>
        </div>
      </a-tab-pane>

    </a-tabs>
  </div>
</template>
<script>
import role from "@/api/accessControlSystem/role";

export default {
  props: {
    // placeSelected: Array,
    checkable: Boolean,
    setHeight: {
      type: String,
      default: "13px"
    },
  },
  components: {},
  data() {
    return {
      autoExpandParent: true, //是否自动展开父节点
      checked: [],
      selected: [],
      roleTree: [],
      iExpandedKeys: [],
      searchValue: {},
      heightTree:{
        height: "500px",
        overflow: "auto"
      }
    };
  },
  mounted() {
    // 使用场景为主页面侧边组件，获取屏幕高度计算(Tab页签和顶部高度和右侧容器上下内边距共150)
    let windowHeight = window.innerHeight;
    this.heightTree.height = windowHeight -150 + "px";
    // 初始化
    role.getRuleMain().then(res => {
      console.log(res);
      if (res.data.success){
        this.roleTree = res.data.result;
        if (this.roleTree != "") {
          this.iExpandedKeys = [this.roleTree[0].key];
        }
      } else {
        this.$message.warning(res.data.message);
      }

    });
  },
  computed: {},
  methods: {
    //树形选中
    onCheck(checked) {
      //this.checked = checked 交给父元素去修改数据
      this.$emit("update:checked", checked);
      this.$emit("on-check", checked);
      this.checked = checked;
      this.selected = [];
    },
    // 树形选择
    onSelect(selectedKeys, info) {
      this.$emit("update:selected", selectedKeys);
      this.$emit("on-select", selectedKeys);
      this.$emit("on-select-info", info);
      this.selected = selectedKeys;
      this.checked = [];
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys;
      this.autoExpandParent = false;
    }

  }
};
//
</script>

<style scoped>
/*布局*/
.ant-tabs-bar {
  margin: 0 0 10px 0;
}
</style>
